<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/serverUrl.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">在线用户</h1>
	</header>
	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		
		<div class="mui-content">
			<ul class="mui-table-view" id="userList">
				<!-- 通过AJAX加载用户列表 -->
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		mui.plusReady(function () {
		    var cw = plus.webview.currentWebview();
		    var labID = cw.labID;
			
			var userJson = {};
			userJson.user = JSON.parse(localStorage.getItem("userInformation"));
			userJson.id = parseInt(labID);
			$.ajax({
				//请求方式
				type: 'POST',
				dataType: 'json',
				url: serverUrl + "teacherOrLaderGetUsersInLab",
				headers: {
					'Content-Type': 'application/json;charset=utf-8'
				},
				data: JSON.stringify(userJson),
				//请求成功
				success: function(data) {
					// 将json转化为列表项
					var userList = "";
					var flag = "";
					for (var i = 0; i < data.length; i++) {
						userList = userList + "<li class='mui-table-view-cell'>" +
						 "姓名："+ data[i].name +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;班级："+ data[i].className + "</li>";
					}
					document.getElementById("userList").innerHTML = userList;
				},
				//请求失败，包含具体的错误信息
				error: function(e) {
					alert( JSON.stringify(e) );
					mui.toast("遇到了未知错误！");
				}
			});
		});
	</script>
</html>
